<template>
  <div class="homeBox">
    <div class="title">
      <span class="iconfont icon-caidan leftIcon"></span>
      <input type="text" @change="productSearch" />
      <span class="iconfont icon-saoyisao rightIcon"></span>
    </div>
    <div>
      <video
        controls="controls"
        autoplay="autoplay"
        loop="loop"
        preload="auto"
        webkit-playsinline="true"
        playsinline="true"
        x5-video-player-type="h5-page"
        x5-video-player-fullscreen="true"
        x-webkit-airplay="allow"
        x5-video-orientation="portraint"
        style="object-fit:fill"
        class="video"
      >
        <source src="https://jstang.xyz/网站首页永不放棄片段.mp4" />
      </video>
    </div>
    <div class="swipeImageSty">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,i) in carouselPictures" :key="i">
          <img :src="item.image" alt />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="scrollImage">
      <swip></swip>
      <!-- <div v-for="(item,i) in image" :key="i">
        <router-link :to="item.path">
          <img :src="item.url" alt />
        </router-link>
      </div>-->
    </div>
    <HelloWorld></HelloWorld>
    <div class="commodity" v-if="productList.length>0">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-card
          v-for="item in productList"
          :key="item.id"
          @click="jump(item.id)"
          :title="item.productName"
        >
          <div class="thumb" slot="thumb" style="height:100%">
            <img :src="item.mainImage" alt />
          </div>
          <div slot="desc">商品原价:{{item.originPrice}}</div>
          <div class="price" slot="price">￥{{item.retailPrice}}</div>
          <div class="bottom" slot="bottom">
            <span class="leftBorder">商品库存:{{item.stock}}</span>
            <span class="rightBorder">运费:{{item.carriage}}</span>
          </div>
        </van-card>
      </van-list>
    </div>
    <div v-else>
      <p style="font-size:14px;color:#666;text-align:center">暂无数据...</p>
    </div>
  </div>
</template>
<script>
import HelloWorld from "../../components/HelloWorld.vue";
import swip from "../../components/Carousel.vue";
export default {
  data: () => ({
    loading: false,
    finished: false,
    productList: [],
    carouselPictures: []
  }),
  computed: {
    userInfo() {
      return JSON.parse(this.$store.state.memberInfo);
    }
  },
  created() {
    if (this.userInfo) {
      console.log("success");
      this.getWxsdk();
    }
  },
  mounted() {
    this.loading = true;
    this.finished = false;
    this.page = 1;
    this.productSearch("");
    // this.$axios.notLoggedIn(`ym/mall-product/list?page=${this.page}&limit=5`).then(msg => {
    //   let List = msg.records;
    //   List.forEach(res => {
    //     this.productList.push(res);
    //   });
    // });
    this.$axios.notLoggedIn(`ym/banner/list`).then(msg => {
      msg.forEach(res => {
        this.carouselPictures.push(res);
      });
      //console.log(msg);
    });
    // this.getUserInfo()
  },
  components: {
    HelloWorld,
    swip
  },
  methods: {
    onLoad() {
      this.productSearch("");
    },
    getWxsdk() {
      console.log("start");
    },
    productSearch(e) {
      this.$axios
        .notLoggedIn(
          `ym/mall-product/list?page=${this.page}&limit=5&keyword=${
            e ? e.target.value : ""
          }`
        )
        .then(msg => {
          let List = msg.records;
          if (List.length > 0) {
            List.forEach(data => {
              this.productList.push(data);
            });
            this.limit += 5;
            this.page += 1;
            this.loading = false;
          } else {
            this.finished = true;
          }
        });
      //console.log(e.target.value);
    },
    getUserInfo() {
      this.$axios.get(`ym/memberuser/user-info`).then(msg => {
        if (msg.data.code === 0) {
          this.$store.commit("SAVEMEMBERINFO", JSON.stringify(msg.data.data));
        } else {
          //console.log('获取用户信息失败！')
        }
      });
      this.$axios.get(`ym/menu/list`).then(msg => {
        window.console.log(msg);
      });
    },
    jump(id) {
      this.$router.push({
        path: "/commodityDetails",
        query: {
          id: id
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.homeBox {
  padding-bottom: 56px;
  .title {
    height: 40px;
    background: rgba(56, 137, 54);
    display: flex;
    align-items: center;
    justify-content: center;
    .leftIcon {
      font-size: 22px;
      position: absolute;
      left: 10px;
      color: #fff;
    }
    input {
      width: 60%;
      padding-left: 10px;
      border: 1px solid #fff;
      border-radius: 8px;
      overflow: hidden;
    }
    .rightIcon {
      font-size: 22px;
      color: #fff;
      position: absolute;
      right: 10px;
    }
  }
  .video {
    width: 100%;
    height: 300px;
    display: block;
    margin: 0 auto;
  }
  .swipeImageSty {
    img {
      width: 100%;
      height: 200px;
      margin: 0;
      padding: 0;
    }
  }
  .scrollImage {
    white-space: nowrap;
    overflow: auto;
    vertical-align: middle;
    padding: 0 2px;
    div {
      width: 35%;
      display: inline-block;
      img {
        width: 100%;
        height: 100px;
        margin: 0;
        padding: 0;
      }
    }
  }
  .commodity {
    height: 100%;
    .thumb {
      img {
        width: 100%;
        height: 100%;
      }
    }
    .price {
      padding-top: 10px;
    }
    .bottom {
      .leftBorder {
        float: left;
        border: 1px solid rgba(194, 54, 104);
        border-radius: 5px;
        padding: 2px;
        font-size: 10px;
        height: 16px;
        line-height: 16px;
        color: rgba(194, 54, 104);
      }
      .rightBorder {
        float: left;
        margin: 0 2px;
        border: 1px solid rgba(208, 126, 102);
        border-radius: 5px;
        padding: 2px;
        color: rgba(208, 126, 102);
        height: 16px;
        line-height: 16px;
      }
    }
  }
}
</style>